<template>
    <div class="clazz-main">
        <el-card class = "card" shadow="hover">
             <div slot="header" class="clearfix">
                <span>查找班级</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input v-model="find.className" placeholder="请根据班名进行查询"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="find.desc" placeholder="请根据班级描述进行查询"></el-input>
                </el-col>
                
                <el-col :span="8">
                    <el-input v-model="find.score" placeholder="请根据班级平均成绩成绩进行查询"></el-input>
                </el-col>
            </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-select v-model="value" placeholder="请选择">
                                <el-option
                                v-for="item in classList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.className">
                                </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-date-picker
                            v-model="find.startTime"
                            type="date"
                            placeholder="请根据开班日期进行查询">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="8">
                        <el-date-picker
                            v-model="find.endTime"
                            type="date"
                            placeholder="请根据结束日期进行查询">
                        </el-date-picker>
                    </el-col>
                </el-row>
               
            <el-button size="small">重置</el-button>
            <el-button size="small" type = "primary" @click = "findVal">查询</el-button>
        </el-card>


        <el-card class="container card">
            <div slot="header" class="clearfix">
                <span>班级列表</span>
                <el-button type = "primary" size="small" @click = "addClass">新增</el-button>
            </div>

            <el-table :data="classList" border style="width: 100%" v-loading = loading>
               
                <el-table-column  fixed prop="#" label="序号" width="80" type="index">
                    
                </el-table-column>
                <el-table-column
                prop="className"
                label="班级名称"
                width="150">
                </el-table-column>
                <el-table-column
                label="班级类型"
                width="150">
                <template slot-scope="scope">
              <span>{{ scope.row.type == 0 ? "UI" : "前端" }}</span>
            </template>
                </el-table-column>
                <el-table-column
                prop="startTime"
                label="开班时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="endTime"
                label="结课时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="desc"
                label="班级描述"
                width="300">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click = "editClass(scope.row.id)">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-card>

        <div class = "block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.start"
                :page-sizes="page.sizes"
                :page-size="page.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalCount">
            </el-pagination>
        </div>


        <!-- 弹窗 -->
        <!-- <com ref="add"></com> -->
        
        <add ref="add" :class-list = "classList" @classlist="getclassList"></add>
    </div>
</template>

<script>
import {classList,classDel} from "@/api/xs/clazz"
import  add  from "./add"
export default {
    name:"class",
    components:{
        add
    },
    data(){
        return{
            loading:false,
            dialog:false,
            find:{
                className:'',
                score:'',
                desc:'',
                startTime:'',
                endTime:'',
            },
            classList:[],
            value: '',
            // 分页
            page:{
                start:1,
                limit:10,
                sizes:[10,20,30,40],
                totalCount:0,
            }
        }
    },
    methods:{
        getclassList(){
            this.loading = true;
            classList({
                start:this.page.start,
                limit:this.page.limit,
                ...this.find
            }).then(res=>{
                console.log(res);
                this.classList = res.data.list;
                this.page.totalCount = res.data.totalRow;
                // console.log(this.totalCount);
                this.loading = false;
            })
        },
        addClass(){
            this.$refs.add.openDialog();
        },
        editClass(id){
            console.log(this.id);
            this.$refs.add.openDialog(id);

        },
        findVal(){
            this.page.start = 1;
            this.getclassList();
        },
        handleClick(row) {
            console.log(row);
            this.$confirm("确认删除？").then((_)=>{
                classDel({
                id:row.id
            }).then(res=>{
                console.log(res);
                this.getclassList()
            })
         })    
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.limit = val;
        this.getclassList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.start = val;
        this.getclassList();
      }
    },
    created(){
        this.getclassList()
    }
}
</script>

<style lang="scss" scoped>
        .card{
            margin:30px;

        }
        .el-button{
            margin-top:10px;
        }
        .el-select{
            width:360px;
            margin-top:10px;
        }
        .el-date-picker{
            width:360px;
            margin-top:10px;
        }
        .block{
            margin:20px 20px 20px 0;
            text-align:right;
        }
        // .el-input{
        //     width:190px;
        // }
</style>